import avatar from '../../assets/images/avatar.png'

const CommentList = props => {
  console.log('CommentList 组件渲染了')
  return (
    <div className="comment-list">
      {/* 列表项 */}
      {props.list.map(item => (
        <div className="list-item" key={item.id}>
          <div className="user-face">
            <img className="user-head" src={avatar} alt="" />
          </div>
          <div className="comment">
            <div className="user">{item.name}</div>
            <p className="text">{item.comment}</p>
            <div className="info">
              <span className="time">2020-07-08 23:40</span>
              <span className="like liked">
                <i className="icon" />
                <span>1</span>
              </span>
              <span className="hate hated">
                <i className="icon" />
              </span>
              <span className="reply btn-hover">回复</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

export default CommentList
